<template>
	<view class="address">
		<!-- <view class="nav">
			<view class="nav_item" @click="onOrder()">
				<image src="https://www.moxikeji.com.cn/img/ruoyi/2024/10/09/5230729a158c4f84a22af42ef3cc8304.png" mode="widthFix"></image>
				<view class="">使用</view>
			</view>
			<view class="nav_item" @click="declet()">
				<image src="https://www.moxikeji.com.cn/img/ruoyi/2024/10/09/c1f139da95cb4fee9864d9458ee43225.png" mode="widthFix"></image>
				<view class="">删除</view>
			</view>
		</view> -->
		<view class="address_img" v-show="data_list.length<=0">
			<image src="https://www.moxikeji.com.cn/img/ruoyi/2024/05/23/1e90ded557ee49d19d2a5cb7155a9a92.png"
				mode="widthFix"></image>
		</view>
		<view class="address_list">
			<view class="address_item" v-for="(address,index) in data_list" :key="index"
				:class="{ selected: index === selectedIndex }" @click="onSelectAddress(index)">
				<view class="address_info">
					<view class="">{{address.provinceName}}{{address.cityName}}{{address.countyName}}{{address.address}}
					</view>
					<view class="moren" v-show="address.isDefault === '1'">默认</view>
				</view>
				<view class="address_info">
					<view class="info">
						<text>{{address.name}}</text>
						<text class="phone">{{address.tel}}</text>
					</view>
					<view class="edit" @click.stop="declet(index)">
						<image src="https://www.moxikeji.com.cn/img/ruoyi/2025/01/10/2bd8c710d6204473a4f22875f2f97beb.png"	mode="widthFix"></image>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer_add" @tap="address_add_event">
				<image src="https://www.moxikeji.com.cn/img/ruoyi/2024/10/09/586c922fc6184925a86355259e39eb84.png" mode="widthFix"></image>
				<view class="">新增收货地址</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				selectedIndex: -1, // 初始化为-1，表示未选中任何地址
				selected: false, // 初始化为false，表示未选中任何地址项
				params: null,
				data_list: [],
				is_default: 0,
				selectAddress: {},
				addrId: "",
				data_list_loding_status: 1,
				data_bottom_line_status: false,
				entryTime: 0,
			}
		},
		// 分享给朋友
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// console.log(res.target,"target");
			}
			return {
				title: app.globalData.data.tenantName,
				path: "pages/user-address/user-address?numberId=" + app.globalData.data.numberId,
				mpId: app.globalData.data.appid
			}
		},
		onLoad(params) {
			if (typeof(params) != 'undefined') {
				var numberId = params.numberId || '';
				if (numberId != '') {
					uni.clearStorageSync();
					app.globalData.data.numberId = numberId;
				}
			}
			if(params && params.params){
				this.params = JSON.parse(params.params);
			}
			this.init();
		},
		onShow() {
			this.get_data_list();
			// 记录用户进来时间
			this.entryTime = Date.now();
		},
		onUnload() {
			this.OnEntryTime();
		},
		methods: {
			init(e) {
				var user = app.globalData.get_user_info(this, "init", "");
				if (user != false) {
					// this.get_data();
				}
			},
			OnEntryTime() {
				var radarlog_data = {
					pageUrl: "pages/user-address/user-address",
					name: "地址管理页",
					remark: "地址管理页停留时间",
					entryTime: this.entryTime,
				}
				uni.request({
					url: app.globalData.get_request_url("radarlog/add"),
					data: radarlog_data,
					method: "POST",
					success: (res) => {
						// console.log(res, "地址管理页停留时间");
					}
				})
			},
			onAddress() {
				uni.navigateTo({
					url: "/pages/user_address_save/user_address_save"
				})
			},
			// 选中
			onSelectAddress(index) {
				if(this.params){
					this.selectAddress = this.data_list[index];
					uni.navigateBack({
						delta: 1,
						success: () => {
							uni.$emit("getAddress", this.selectAddress)
						}
					})
				}
				// if (index === this.selectedIndex) {
				// 	this.selected = false;
				// 	this.selectedIndex = -1;
				// } else {
				// 	this.selected = true;
				// 	this.selectedIndex = index;
				// 	this.selectAddress = this.data_list[index]
				// 	this.addrId = this.selectAddress.addrId;
				// 	uni.navigateBack({
				// 		delta: 1,
				// 		success: () => {
				// 			uni.$emit("getAddress", this.selectAddress)
				// 		}
				// 	})
				// }
			},
			declet(index) {
				uni.showModal({
					title:'温馨提示',
					content:"是否删除此地址?",
					confirmText:'确定',
					cancelText:'不了',
					complete: (rres) => {
						if(rres.confirm){
							var data = {
								// id: this.addrId
								id: this.data_list[index].addrId 
							}
							let url = app.globalData.get_request_url("useraddress/delete");
							uni.request({
								url: url,
								method: "POST",
								data: data,
								success: (res) => {
									if (res.data.code == 200) {
										uni.showToast({
											title: "删除成功"
										})
										this.data_list.splice(this.selectedIndex, 1);
										// this.selectedIndex = -1;
									} else {
										uni.showToast({
											title: "请求出错了"
										})
									}
								}
							})
						}
					}
				})
			},
			// 使用
			onOrder() {
				uni.navigateBack({
					delta: 1,
					success: () => {
						uni.$emit("getAddress", this.selectAddress)
					}
				})
			},
			// 获取地址信息
			get_data_list() {
				// 加载loding
				uni.showLoading({
					title: '加载中...'
				})
				var data = this.params;
				let url = app.globalData.get_request_url("useraddress/index");
				uni.request({
					url: url,
					method: "POST",
					data: data,
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							var dataList = res.data.data;
							if (dataList.length > 0) {
								// 获取当前默认地址
								var is_default = 0;
								for (var i in dataList) {
									if (dataList[i]['isDefault'] == 1) {
										is_default = dataList[i]['addrId'];
									}
								}

								// 设置数据
								this.data_list = dataList
								this.is_default = is_default
								this.data_list_loding_status = 3
								this.data_bottom_line_status = true
							} else {
								this.data_list_loding_status = 0
							}
						} else {
							this.data_list_loding_status = 0
						}
					}
				})
			},
			// 添加地址事件
			address_add_event() {
				uni.navigateTo({
					url:'/pages/user_address_save/user_address_save'
				})
				// var temp_params = this.params;
				// temp_params['id'] = 0;
				// var query = app.globalData.json_to_url_params(temp_params);
				// uni.navigateTo({
				// 	url: '/pages/user_address_save/user_address_save?' + query
				// });
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.get_data_list();
		}
	}
</script>

<style lang="less">
	.selected {
		border: 1px solid black;
		/* 添加黑色边框样式 */
	}

	.moren {
		color: red;
	}
	.nav{
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #f2f2f2;
		.nav_item{
			display: flex;
			align-items: center;
			image{
				width: 50rpx;
			}
		}
	}

	.address {
		.address_img {
			image {
				display: block;
				margin: 40rpx auto;
			}
		}

		.address_list {
			width: 100%;
			padding-bottom: 120px;

			.address_item {
				width: 90%;
				height: 120rpx;
				margin: 20rpx auto;
				display: block;
				background-color: white;
				padding: 30rpx 30rpx 30rpx 30rpx;
				border-radius: 10px;
				box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
				font-size: 13px;

				.address_info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 30rpx;
					margin-top: 20rpx;

					.info {
						.phone {
							margin-left: 20rpx;
						}
					}

					.edit {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.footer{
			width: 100%;
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			border-top: 2px solid gray;
			.footer_add{
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 20rpx;
				
				image{
					width: 50rpx;
					padding-right: 20rpx;
				}
			}
		}
		

		.add {
			width: 100%;
			height: 40px;
			background-color: #f5f5f5;
			position: fixed;
			bottom: 40rpx;
			padding-top: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;

			.declet {
				width: 100px;
				height: 40px;
				margin: auto;
				text-align: center;
				line-height: 40px;
				color: white;
				border-radius: 5px;
				margin-right: 20rpx;
				font-size: 13px;
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
				}

				.declet_name {
					padding-left: 10rpx;
					font-size: 15px;
				}
			}

			.red {
				background-color: red;
			}

			.green {
				background-color: #03f72b;
			}

			.gray {
				background-color: gray;
			}
		}
	}
</style>